<script setup lang="ts">
// #ifdef MP
import { onAddToFavorites, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
import { wxCollect, wxShare } from '@/libs/share'

onShareAppMessage(wxShare(true))
onShareTimeline(wxShare(false))
onAddToFavorites(wxCollect())
// #endif

import { onMounted, onUnmounted } from 'vue'

import { clear, curAnswerIdx, curQuestion, curQuestionIdx, next, pre, progressValue, questionCount, start } from './data'
import { imagePath } from '@/libs/file-utils'

const img_bg = imagePath('quiz/love/bg.jpg')
const img_title = imagePath('quiz/love/title.png')
const img_card = imagePath('quiz/love/card.png')
const card_progress = imagePath('quiz/love/card-progress.png')
const card_question = imagePath('quiz/love/detail/card-question.png')
const option_bg = imagePath('quiz/love/detail/option-bg.png')
const btn_bg = imagePath('quiz/love/detail/btn-bg.png')

onMounted(start)
onUnmounted(clear)
</script>

<template>
  <PageWrapper
    name="quiz-love-detail"
    :pageStyle="{ backgroundImage: img_bg }"
  >
    <div
      class="card"
      :style="{ backgroundImage: img_card }"
    >
      <div
        class="title"
        :style="{ backgroundImage: img_title }"
      ></div>

      <div
        class="card-progress"
        :style="{ backgroundImage: card_progress }"
      >
        <div class="progress"><span class="value">{{ curQuestionIdx + 1 }}</span> /{{ questionCount }}题</div>
        <div class="bar">
          <div
            class="inner"
            :style="{ width: progressValue }"
          ></div>
        </div>
        <div class="precent">{{ progressValue }}</div>
      </div>

      <template v-if="curQuestion">
        <div
          class="card-question"
          :style="{ backgroundImage: card_question }"
        >
          <div>问题{{ curQuestionIdx + 1 }}：</div>
          <div class="content">{{ curQuestion.text }}</div>
        </div>

        <div class="options">
          <div
            v-for="(item, index) in curQuestion.options"
            :key="index"
            class="option"
            :style="{ backgroundImage: option_bg }"
            @click="curAnswerIdx = index"
          >
            <div
              class="icon"
              :class="{ active: curAnswerIdx === index }"
            ></div>
            <div>{{ item.label }}</div>
          </div>
        </div>
      </template>

      <div
        v-if="curQuestionIdx"
        class="btn pre"
        :style="{ backgroundImage: btn_bg }"
        @click="pre"
      >上一题</div>
      <div
        class="btn next"
        :style="{ backgroundImage: btn_bg }"
        @click="next"
      >{{ curQuestionIdx <
        questionCount
        -
        1
        ? '下一题'
        : '提交'
      }}</div
        >
      </div>
  </PageWrapper>
</template>

<style lang="less" scoped>
.card {
  position: relative;
  width: 742rpx;
  height: 1328rpx;

  margin-top: 30rpx;
  margin-left: 6rpx;

  .title {
    position: absolute;
    top: 180rpx;
    left: 70rpx;

    width: 316rpx;
    height: 179rpx;
  }

  .card-progress {
    position: absolute;
    top: 186rpx;
    right: 66rpx;

    width: 272rpx;
    height: 186rpx;

    .progress {
      position: absolute;
      top: 32rpx;
      right: 38rpx;

      color: #876ACA;
      text-shadow: 0 0 6rpx rgba(171, 43, 0, .34);
      font-size: 48rpx;
      line-height: 68rpx;

      .value {
        color: #FFEA84;
        font-size: 64rpx;
      }
    }

    .bar {
      position: absolute;
      bottom: 50rpx;
      left: 36rpx;

      width: 156rpx;
      height: 20rpx;

      border-radius: 10rpx;
      box-shadow: inset 0 2rpx 6rpx 10rpx rgba(171, 43, 0, .25);

      .inner {
        width: 50%;
        height: 100%;

        border-radius: 10rpx;

        background-image: linear-gradient(90deg, #FF9A36 0%, #FFEA84 100%);
        box-shadow: 0 -4rpx 8rpx 0 rgba(239, 68, 0, .41) inset;
      }
    }

    .precent {
      position: absolute;
      bottom: 48rpx;
      right: 36rpx;

      color: #FFE983;
      text-shadow: 0 2rpx 2rpx rgba(171, 43, 0, .25);
      font-size: 20rpx;
      line-height: 28rpx;
    }
  }

  .card-question {
    position: absolute;
    top: 360rpx;
    left: 60rpx;

    width: 612rpx;
    height: 274rpx;

    box-sizing: border-box;
    padding: 54rpx 44rpx;

    color: #5A2042;
    font-size: 40rpx;
    line-height: 48rpx;

    .content {
      width: 356rpx;

      margin-top: 16rpx;
    }
  }

  .options {
    position: absolute;
    top: 650rpx;
    left: 66rpx;

    .option {
      width: 598rpx;
      height: 106rpx;

      margin-bottom: 6rpx;

      box-sizing: border-box;
      padding: 0 40rpx;

      display: flex;
      align-items: center;

      color: #FFF;
      font-size: 40rpx;

      .icon {
        width: 40rpx;
        height: 40rpx;

        margin-right: 12rpx;

        box-sizing: border-box;
        border: 4rpx solid #fff;
        border-radius: 50%;

        transition: background-color .3s;

        &.active {
          background-color: #fff;
        }
      }
    }
  }

  .btn {
    position: absolute;
    bottom: 78rpx;

    width: 277rpx;
    height: 103rpx;

    color: #FFF;
    font-size: 48rpx;
    line-height: 100rpx;
    text-align: center;

    &.pre {
      left: 66rpx;
    }

    &.next {
      right: 78rpx;
    }
  }
}
</style>